<template>
	<div class="content">
		<div class="header">
			<ul>
				<li>
					<p class="header_title">我的团队</p>
					<p class="header_num">{{countData.dowmline_num==''?0:countData.dowmline_num}}<span>人</span></p>
				</li>
				<li>
					<p class="header_title">分销分成</p>
					<p class="header_num">{{countData.total_contribute==''?0:countData.total_contribute}}<span>元</span></p>
				</li>
			</ul>
		</div>
		<div class="visit_body">
			<ul>
				<li v-for="(item,index) in list" :key="index">
					<div class="visit_user">
						<img :src="item.user_picture" alt="">
					</div>
					<div class="visit_userdetail">
						<p>{{item.nick_name==''?'暂无姓名':item.nick_name}}</p>
						<p>手机号码：{{item.mobile_phone}}
							<span>贡献金额{{item.contribute_money}}元
							<i class="iconfont iconjiantou" v-if="false"></i></span>
						</p>
						<p>加入时间：{{item.reg_time}}</p>
					</div>
				</li>
			</ul>
			<view v-if="finished" class="noMore">没有更多了</view>
		</div>
	</div>
</template>
<script>
import { getuserrelevant } from '@/api/getGuest'
export default {
	name: 'lowerMember',
	data() {
		return {
			countData: {},
			list: [],
			page: 1,
			finished: false
		}
	},
	onLoad(option) {
		this.option = option
		this.getuserrelevantFN()
	},
	// 下拉刷新
	onPullDownRefresh() {
		let that = this
		this.resetList()
		this.getuserrelevantFN().then(res => {
			uni.stopPullDownRefresh()
		})
	},
	// 加载更多
	onReachBottom() {
		this.getuserrelevantFN().then(res => {
			uni.stopPullDownRefresh()
		})
	},
	methods: {
		resetList() {
			this.page = 1
			this.article = []
		},

		getuserrelevantFN() {
			let that = this
			return getuserrelevant({
				page: this.page,
				limit: 10
			}).then(res => {
				if (res.status === 'success') {
					let list = res.data.user_list
					this.countData = res.data
					if (list.length !== 0) {
						this.list = [...this.list, ...list]
						this.page++
					}
					if (list.length < 10 || (list.length === 0 && this.list.length != 0)) {
						this.finished = true
					}
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
	uni-page-body{
		background-color: #f5f5f5;
	}
	.content {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;

		.header {
			left: 0;
			top: 0;
			height: 130px;
			width: 100%;
			position: fixed;
			background: white;

			ul {
				height: 70px;
				width: 100%;
				margin-top: 30px;

				li {
					float: left;
					width: 49%;
					height: 100%;
					text-align: center;
					border-right: 1px solid #eeeeee;

					.header_title {
						font-size: 24px;
						color: #999999;
					}

					.header_num {
						font-size: 36px;
						color: #040404;
						margin-top: 10px;

						span {
							font-size: 24px;
						}
					}
				}

				li:last-child {
					border: none;
				}
			}
		}

		.visit_body {
			width: 100%;
			height: auto;
			background: white;
			margin-top: 150px;
			position: absolute;

			li {
				width: 97%;
				height: 170px;
				margin-left: 3%;
				border-bottom: 1px solid #EEEEEE;
				padding: 10px 0;

				.visit_user {
					width: 80px;
					height: 80px;
					margin-top: 45px;
					border-radius: 45px;
					float: left;

					img {
						width: 100%;
						height: 100%;
						border-radius: 45px;
					}
				}

				.visit_userdetail {
					float: left;
					margin-top: 45px;
					margin-left: 20px;
					font-size: 24px;
					color: #666666;
					width: 83%;
					p {
						width: 100%;
						float: left;
						margin-bottom: 10px;
						span {
							float: right;
							color: #FF6900;
						}

						color: #999999;
					}

					p:nth-child(1) {
						color: #333333;
						font-size: 32px;
						margin-bottom: 15px;
					}
				}
			}
		}
	}
</style>
